<template>
  <div class="jbc-container jbc-type">
    <jbc-menu />
    <div class="jbc-box jbc-type__body">
      <goods-type :type-id="state.typeId" @change="bindTypeChange" type-page></goods-type>
      <div class="jbc-type__content">
        <el-breadcrumb v-if="pathList.length" style="margin-top: 5px;padding: 12px 0 7px;" :separator-icon="ArrowRight">
          <el-breadcrumb-item v-for="path in pathList" :key="path.id">{{ path.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="index-goods-title">
          <div class="index-goods-title__left">
            <sortButton ref="sort1" label="销量" property="1" @sort="bindChangeSort"></sortButton>
            <sortButton ref="sort2" label="价格" property="2" @sort="bindChangeSort"></sortButton>
            <sortButton ref="sort3" label="上架时间" property="3" @sort="bindChangeSort"></sortButton>
            <el-input v-model="minPrice" size="small" style="margin-left: 12px; width: 60px" placeholder="Please input"
              :formatter="(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="(value) => value.replace(/￥\s?|(,*)/g, '')" />
            <span style="padding: 0 5px;">-</span>
            <el-input v-model="maxPrice" size="small" style="width: 60px" placeholder="Please input"
              :formatter="(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="(value) => value.replace(/￥\s?|(,*)/g, '')" />
            <el-button style="margin-left: 12px;" size="small" color="#D6000F" @click="handlePriceChange">确认</el-button>
          </div>
          <div class="index-goods-title__right">
            共<span class="total">{{ $numberDisplay(state.total) }}</span>件商品
          </div>
        </div>
        <goods-list ref="goodsListRef" :sort-type="state.sortType" :is-desc="state.isDesc" :max-price="state.maxPrice"
          :min-price="state.minPrice" :search="state.search" :type-id="state.typeId"
          @total="bindChangeTotal"></goods-list>
      </div>
    </div>
  </div>
</template>

<script setup name="Type">
import { ArrowRight } from "@element-plus/icons-vue"

const { proxy } = getCurrentInstance()
const route = useRoute()
const goodsListRef = ref()
const sort1 = ref()
const sort2 = ref()
const sort3 = ref()
const state = reactive({
  sortType: '',
  isDesc: '',
  maxPrice: '',
  minPrice: '',
  search: route.query.searchKey || '',
  typeId: route.query.typeId || '',
  total: 0
})
const pathList = ref([])
const maxPrice = ref('')
const minPrice = ref('')
const orderMap = {
  asc: 'N',
  desc: 'Y'
}
const sorts = [{ key: '1', elComponent: sort1 }, { key: '2', elComponent: sort2 }, { key: '3', elComponent: sort3 }]
const bindChangeSort = ({ property, order }) => {
  if (order) {
    state.sortType = property
    state.isDesc = orderMap[order]
    sorts.forEach(item => {
      if (item.key !== property) {
        item.elComponent.value.setDefault()
      }
    })
  } else {
    state.sortType = ''
    state.isDesc = ''
  }
}
const handlePriceChange = () => {
  state.maxPrice = maxPrice.value
  state.minPrice = minPrice.value
}
const bindChangeTotal = (total) => {
  state.total = total
}
const bindTypeChange = (d) => {
  if (d.id !== state.typeId) {
    state.typeId = d.id
  }
  pathList.value = d.pathList
}
const routeWatch = watch(() => route.query, (v) => {
  state.search = v.searchKey || ''
  state.typeId = v.typeId || ''
})

onMounted(() => {
  goodsListRef.value.loadMore()
})
</script>

<style scoped lang="scss">
.jbc-type {
  background-color: #fff;

  &__body {
    display: flex;
    align-items: flex-start;
  }

  &__content {
    margin-left: 10px;
    flex: 1;
  }
}

.index-goods-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #F5F6F5;
  border: 1px solid var(--jbc-border-color);
  position: relative;
  box-sizing: border-box;
  $title-width: 124px;
  margin-top: 5px;

  &__left {
    img {
      width: $title-width;
    }
  }

  &__right {
    text-align: right;

    .total {
      color: var(--jbc-color);
      padding: 0 5px;
    }
  }
}
</style>
